<template>
	<view class="flex-col">
		<PageHeader>
			<template #content>
				<view v-if="title" :style="titleStyle" class="bg-gray91 text-center font-s32 lh-32">
					<text>{{title}}</text>
				</view>
			</template>
		</PageHeader>
		<!-- 内容区 -->
		<scroll-view :style="bodyStyle" scroll-y @scroll="scroll" :scroll-top="scrollTopId" @touchmove.stop @scrolltolower="nextPage">
			<slot name="content"></slot>
			<!-- #ifdef H5  -->
			<view class="hw300" :style="tailStyle"></view>
			<!-- #endif -->
			<!-- #ifndef H5  -->
			<view class="hw64" :style="tailStyle"></view>
			<!-- #endif -->
		</scroll-view>
		<!-- 菜单栏 -->
		<view :class="isHideManus || !isShowMenus ? 'display-none' : 'display-flex' ">
			<view :style="nemuBarStyle" class="flex-row align-center space-around bg-gray91 text-black">
				<template v-for="item in currentMenuBar" :key="item.alias">
					<view class="flex-sub flex-col-center">
						<view 
							class="flex-col-center round margin-tb-5" 
							@click="selectMenu(item.url, item.alias)"
							:class="menusStore.getSelectMenuItem() === item.alias ? 'selected text-green':  '' "
							>
							<text class="iconfont " :class="[item.icon]"  :style="item.iconStyle"></text>
						</view>
						<text class="font-s20 " :class="menusStore.getSelectMenuItem() === item.alias ? 'selected text-green':  '' ">{{item.name}}</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { onLoad, onUnload } from "@dcloudio/uni-app"
import { storeToRefs } from "pinia"
import { redirectTimeout } from '@/security/router'
import { useMenusStore } from "@/stores"

const menusStore = useMenusStore()
const { currentMenuBar } = storeToRefs(menusStore)

// 页面滚动的位置
const scrollTopId = ref<number>(0)
// 是否隐藏菜单
const isHideManus = ref(false)
const emit = defineEmits(["scrolltolower"]);

const props = defineProps({
	name: {
		type: String,
		default: undefined
	},
	title: {
		type: [String],
		default: undefined,
	},
	isShowMenus:{
		type: [Boolean],
		default: true,
    },
	tailStyle:{
     type: Object,
     default: undefined
   },
})
const windowInfo = uni.getWindowInfo()
const safeAreaInsetsBottom = windowInfo.safeAreaInsets.bottom
const statusBarHeight = windowInfo.statusBarHeight
const screenHeight = windowInfo.screenHeight
const screenWidth = windowInfo.screenWidth
// 标题高度
const titleHeight = props.title ? 35 : 0
// 菜单高度
const nemuBarHeight = 55
// 内容高度
const bodyHeight = screenHeight - statusBarHeight - safeAreaInsetsBottom - titleHeight - nemuBarHeight
// 标题样式
const titleStyle = reactive<any>({
	height: titleHeight + 'px',
	paddingTop: statusBarHeight + 'px',
	lineHeight: titleHeight + 'px',
})

// 内容区样式
const bodyStyle = reactive<any>({
	height: bodyHeight + 'px',
	maxHeight: "2048px",
	width: screenWidth + 'px',
	paddingTop: titleHeight + statusBarHeight + 'px',
	position: 'fixed',
	top: "0px",
	left: "0px",
	zIndex: '1024',
})

// 菜单区样式
const nemuBarStyle = reactive<any>({
	height: nemuBarHeight + 'px',
	width: screenWidth + 'px',
	paddingBottom: safeAreaInsetsBottom + 'px',
	position: 'fixed',
	bottom: "0px",
	left: "0px",
	zIndex: '1024',
})

// 选择菜单
async function selectMenu(url: string, name: string){
    redirectTimeout(url, 0)
    menusStore.setSelectMenuItem(name);
}

// 记录滚动的位置
function scroll(e: any){
    if(props.name){
        menusStore.setScrollerId(props.name, e.detail.scrollTop)  
    }
}

// 下一页
function nextPage(){
    emit("scrolltolower");
}

//  #ifndef H5
onLoad(()=>{
    uni.onKeyboardHeightChange(onKeyboardHeightChange);
	// 回到原先滑动的位置
	if(props.name){
		const avl = menusStore.getScrollerId((props.name))
		scrollTopId.value = avl ? Number(avl) : 0
	}
}) 

onUnload(()=>{
    uni.offKeyboardHeightChange(onKeyboardHeightChange);
}) 

function onKeyboardHeightChange(res: any){
    const { height, duration } = res;
    if (height > 0) {
       isHideManus.value = true // 键盘弹起
    }else {
       isHideManus.value = false  // 键盘收回
    }
}
// #endif 

</script>